<template>
    <div class="user-container">
        <el-card class="box-card">
            <div slot="header">
                <!-- 导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 导航 -->
            </div>
            <!-- 查询表单 -->
            <el-form ref="form" :inline="true" class="searcher-form" :model="form" label-width="100px" size="small">
                <el-form-item label="用户名称：">
                    <el-input v-model="form.username" placeholder="请输入用户名称"></el-input>
                </el-form-item>
               <!-- <el-form-item label="注册时间：">
                    <el-date-picker
                        v-model="form.date1"
                        type="datetime"
                        placeholder="开始时间">
                    </el-date-picker>
                    至
                    <el-date-picker
                        v-model="form.date2"
                        type="datetime"
                        placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>-->
                <el-form-item label="账号状态：" >
                    <el-radio-group v-model="form.state">
                        <el-radio :label="-1">全部</el-radio>
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">冻结</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSearch" icon="el-icon-search" type="primary">搜索</el-button>
                </el-form-item>
            </el-form>
            <!-- 查询表单 -->
        </el-card>

        <el-card class="box-card">
            <div slot="header" class="data-header">
                <el-button type="success" @click="toAddUser">新建用户</el-button>
                <span v-if="totalCount > 0">查询出{{totalCount}}条符合条件的数据</span>
                <span v-else-if="totalCount == 0">没有满足相关条件的数据哦！</span>
            </div>
            <!-- 数据表格 -->
            <el-table
                v-loading="loading"
                class="data-form"
                :data="userList"
                style="width: 100%">
                <!--<el-table-column
                    label="头像" align="center">
                    <template slot-scope="scope">
                        &lt;!&ndash;                        <img :src="scope.row.url"/>&ndash;&gt;
&lt;!&ndash;                        <img class="data-img" src="./img/1.jpg"/>&ndash;&gt;
                    </template>
                </el-table-column>-->
                <el-table-column
                    prop="id"
                    width="100px"
                    label="id" align="center">
                </el-table-column>
                <el-table-column
                    prop="uid"
                    :show-overflow-tooltip="true"
                    label="uid" align="center">
                </el-table-column>
                <el-table-column
                    width="140px"
                    label="注册日期" align="center">
                    <template slot-scope="scope">
                        {{scope.row.createDate | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    width="150px"
                    label="昵称"
                    align="center">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.nickname}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="账号" align="center">
                </el-table-column>
                <el-table-column
                    width="200px"
                    label="最近登录时间"
                    align="center">
                    <template slot-scope="scope">
                        {{scope.row.lastLoginDate | dateFormatAll}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="状态"
                    width="150px"
                    align="center">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.state === 1"
                            @change="lockUserAccount($event,scope.row.id)"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="100px"
                    align="center">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit" circle
                            @click="handleEdit(scope.$index, scope.row)"
                        ></el-button>
                        <el-button
                            size="mini"
                            type="info"
                            icon="el-icon-key" circle
                            @click="updatePassword(scope.$index, scope.row)"
                        ></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 数据表格 -->
            <!-- 分页 -->
            <el-pagination
                background
                layout="prev, pager, next, sizes, total"
                @current-change="onChangePage"
                @size-change="onChangePageSize"
                :page-sizes="[5, 10, 20, 50]"
                :total="totalCount">
            </el-pagination>
            <!-- 分页 -->
        </el-card>

        <!-- 修改密码对话框 -->
        <el-dialog title="修改密码"
                   width="400px"
                   @closed="closePasswordDialog"
                   :append-to-body="true"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   :visible.sync="dialogFormVisible">
            <el-form :model="dialog" label-position="right" label-width="90px">
                <el-input v-model="dialog.id" type="hidden"></el-input>
                <el-form-item label="用户：">
                    <el-input v-model="dialog.username" type="text" disabled></el-input>
                </el-form-item>
                <el-form-item label="新密码：">
                    <el-input v-model="dialog.newPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码：">
                    <el-input v-model="dialog.confirmPassword" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureUpdatePassword">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import {getUserList, updateUser, updateUserPassword} from '../../api/user'

    import '../../filter'

    export default {
        name: "UserIndex",
        inject:['reload'],              //注入App里的reload方法
        data() {
            return {
                form: {
                    state: -1,
                    username: '',
                    date1: '',
                    date2: '',
                },
                dialog: {
                    id: '',             // 用户id
                    username: '',       // 用户名
                    newPassword: '',    // 新密码
                    confirmPassword: '' // 确认密码
                },
                dialogFormVisible: false,   // 修改密码对话框
                userList: [],   // 数据集合
                page: 1,        // 页码
                pageSize: 10,   // 每页显示多少数据
                totalCount: 0,  // 总数据个数
                loading: false  // 是否正在加载数据
            }
        },
        created() {
            this.loadUserList()
        },
        methods: {
            //加载用户列表
            loadUserList() {
                this.onSearch()
            },
            onSearch() {
                this.loading = true         // 加载数据中
                getUserList({
                    'page': this.page,
                    'pageSize': this.pageSize,
                    'state': this.form.state,
                    'username': this.form.username
                }).then(res => {
                    const data = res.data.data
                    this.userList = data.list       // 加载用户数据
                    this.totalCount = data.total    // 分页总数
                })
                this.loading = false    // 加载数据结束
            },
            onChangePage(page) {
                this.page = page
                this.loadUserList()
            },
            onChangePageSize(pageSize) {
                this.pageSize = pageSize
                this.loadUserList()
            },
            toAddUser() {
                this.$router.push("/addUser")
            },
            handleEdit(index,row) {
                // 编辑用户
                this.$router.push({path:'/editUser',query:{
                    'id': row.id
                }})
            },
            updatePassword(index,row) {
                this.dialogFormVisible = true
                this.dialog.id = row.id
                this.dialog.username= row.username
            },
            sureUpdatePassword() {
                if(this.dialog.newPassword !== this.dialog.confirmPassword){
                    this.$message.error("密码不一致")
                    return
                }
                updateUserPassword({
                    'id': this.dialog.id,
                    'password': this.dialog.newPassword
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: '密码修改成功',
                            type: 'success'
                        })
                        this.dialogFormVisible = false
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            },
            closePasswordDialog() {
                this.dialog.id = ''
                this.dialog.newPassword = ''
                this.dialog.confirmPassword = ''
            },
            lockUserAccount(state,id) {
                // 冻结用户
                this.$confirm('此操作将冻结此用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    updateUser({
                        'state': state === true ? 1 : 0,
                        'id': id
                    }).then(res => {
                        if(res.data.code == 200){
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            })
                            this.loadUserList()
                        }else{
                            this.$message.error("系统异常")
                        }
                    }).catch(() => {

                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>
